<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .max{
            
            /* border: 1px solid black; */
            width: 210mm;
            height: 297mm;
            margin: 0mm auto;
            padding-left:10mm;
            padding-right:10mm;
        }
        .m_haede{
            width: 100%;
            height: 22%;
            /* border: 1px solid red; */
            /* background-color: red; */
            position: relative;
        }
        .log{
            font-size: 351%;
            font-weight: 600;
            display: inline-block;
            transform: rotate(-90deg);
            position: absolute;
            left: -15mm;
            top: 25mm;
        }
        .x-img{
            position: absolute;
            width: 135px;
            height: 180px;
            left: 34mm;
            top: 14mm;
        }
        .message{
            width: 60%;
            height: 100%;
            /* background-color: red; */
            float: right;
            padding-top: 44mm;
        }
        .message p{
            font-family: "宋体";
            font-weight: 600;
            margin-bottom: 2mm;
        }
        .message_left{
            float: left;
        }
        .message_right{
            float: right;
            padding-right: 10px;
        }
        .index{
            height: 75%;
            width: 100%;
            /* background-color: rgb(207, 188, 188); */
            margin-top: 8mm;
        }
        .index h3{
            background-color: rgb(226, 226, 226);
            font-size: 110%;
            padding: 1mm;
            margin-bottom: 5mm;
        }
        .left{
            width: 30%;
            height: 100%;
            float: left;
            padding-right: 8mm;
            border-right: 1px dashed rgb(155, 152, 152);
        }
        .left>div{
            height: 28%;
            width: 100%;
            margin-bottom: 10mm;
            /* background-color: aqua; */

        }
        .left .l2{
            height: 25%;
        }
        .left .l3{
            height: 38%;
        }
        .left p{
            font-family: "宋体";
            font-weight: 600;
            color:rgb(65, 64, 64) ;
            margin-bottom: 5mm;
            font-size: 100%;
            padding-left: 3mm;
        }

        .right{
            float: right;
            width: 65%;
            height: 100%;
            
            /* border: 1px solid rgb(130, 24, 24); */
            
        }
        .right li{
            list-style:none ;
            margin-bottom: 20px;
            padding-left: 6px;
            font-size: 88%;
            font-family: "宋体";
        }
        .right .demo_li{
            /* color: red; */
            font-weight: 600;
        }
        .m_haede .message_left .name{
            font-size: 130%;
            /* font-weight: bold; */
        }
    </style>
</head>
<body>
    <div class="max">
        <div class="m_haede">
            <div class="log">HELLO,</div>
            <img src="11.jpg" alt="" class="x-img">
            <div class="message">
                <div class="message_left">
                    <p>姓名：<span class="name">熊书鹤</span></p>
                    <p>年龄：21</p>
                    <p>电话：17786623603</p>
                </div>
                <div class="message_right">
                    <p>学历：本科</p>
                    <p>&nbsp;</p>
                    <p>邮箱：X1366879148@163.com</p>
                </div>
            </div>
        
        </div>
        <div class="index">
            <div class="left">
                <div class="l1">
                    <h3>期望职位</h3>
                    <p>前端实习生</p>
                    <p>前端开发工程师</p>
                    <p>一周内到岗</p>
                    <p>PC端</p>
                    
                </div>
                <div class="l2">
                    <h3>教育背景</h3>
                    <p>本科</p>
                    <p>软件工程</p>
                    <p>2019.9-2023.6</p>
                </div>
                <div class="l3">
                    <h3>校内实践</h3>
                    <p>宣传委员</p>
                    <p>负责班级活动</p>
                    <p>的拍照记录</p>
                    <p>和活动海报</p>
                    <p>的制作与宣传</p>
                </div>
            </div>
            <div class="right">
                <h3>专业技能</h3>
                <ul>
                    <li>能熟练运用Vue框架进行模块开发,熟悉官方API,  Vue脚手架,了解Vue指令,方法的使用及生命周期,使用Vuex、全局事件总线实现各个组件之间数据传递</li>
                    <li>能运用Element UI插件构建项目 </li>
                    <li>熟练掌握HTML+CSS布局，掌握HTML5,CSS3技术开发。</li>
                    <li>熟悉JavaScript, DOM, BOM以及最新的Es6语法</li>
                    <li>能熟练运用Ajax,Axios发送后台请求</li>
                    <li>了解Webpack、Git的基本命令</li>
                    <li>了解PHP后端开发技术</li>
                    <li>对项目的前后端联合开发有基本了解</li>
                </ul>
                <h3>项目实践</h3>
                <ul>
                    <li class="demo_li">购物网站后台管理系统</li>
                    <li>项目用到的技术：Vue、Router、Element UI、Axios</li>
                    <li>项目使用Vue-cli搭建</li>
                    <li>根据设计图，使用Element UI 部分引入和Flex完成页面结构准确还原页面布局</li>
                    <li>使用Router实现单页面应用，Prpos实现父子组件间通讯，由于项组件结构并不复杂所以未使用Vuex</li>
                    <li>使用Axios完成前后端数据交互并渲染页面</li> 
                    <li>使用函数防抖控制按钮事件在规定时间内只能触发一定次数，减小服务端压力</li>               
                </ul>
            </div>
        </div>
    </div>
</body>
</html>